<template>  
<div class="swidth" >
    <input :id="'inputswidth'+ clis" class="inputswidth" :checked="value" type="checkbox" @input="checkinput"/>
    <label :for="'inputswidth'+ clis" class="inputlabel"></label>
</div>
</template>

<script>
export default {
   props:{
       value:{
           type:Boolean,
           default:false
       },
       clis:{
           type:String,
           default:""
       }
   },
   methods:{
       checkinput(e){
           this.$emit("input",e.target.checked)
       }
   }
}
</script>

<style scoped>
.swidth{
    display: flex;
}
.inputswidth{
  display: none;
}
.inputlabel{
    width: 60px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 30px;
    position: relative;
}
.inputlabel:before{
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      background: aqua;
      height: 30px;
      width: 30px;
      border-radius: 100%;
}
.inputswidth:checked + .inputlabel:before{
     left: 100%;
     margin-left: -30px;
}
</style>